<template>
  <div class="detail">
    <NavBar
      @clickRight1="onClickRight1"
      @clickRight2="onClickRight2"
      ref="navbar"
    >
      <template #default>
        <div class="profile-group" v-if="profile">
          <div class="col-1">
            <img
              v-if="articleContent&&userProfile" class="avatar" v-lazy="articleContent.aut_photo" alt="">
            <img
              v-else class="avatar" src="@/assets/avatar.jpg" alt="头像">
          </div>
          <div class="col-2">
            <span class="username-top">{{ articleContent.aut_name }}</span>
            <span class="fans-top">{{ userProfile.fans_count }}粉丝</span>
          </div>
        </div>
      </template>
    </NavBar>
    <van-skeleton title avatar :row="15" :loading="loading1">
      <div class="content" v-if="articleContent&&userProfile">
        <h1 class="title">
          {{ articleContent.title }}
        </h1>
        <div class="top" ref="top">
          <div class="col col-1">
            <img
              v-if="articleContent&&userProfile" class="avatar" v-lazy="articleContent.aut_photo" alt="">
            <img
              v-else class="avatar" src="@/assets/avatar.jpg" alt="头像">
          </div>
          <div class="col col-2">
            <span class="username">{{ articleContent.aut_name }}</span>
            <span class="time">{{ articleContent.pubdate | dateFormat }}</span>
          </div>
          <div class="col col-3">
            <van-button
              v-if="userProfile.is_following"
              type="primary" round size="small" @click="unfollow(articleContent,userProfile)">已关注
            </van-button>
            <van-button
              v-else
              icon="plus" type="info" round size="small" @click="follow(articleContent,userProfile)">关注
            </van-button>
          </div>
        </div>
        <div class="article" ref="article" v-html="articleContent.content">
        </div>
        <div class="you-like">
          <h2>猜你喜欢</h2>
          <ul class="like-lists" v-if="articleContent.recomments.length>0">
            <li class="like-item" v-for="(item,index) in articleContent.recomments" :key="index">{{ item }}</li>
          </ul>
          <h2 v-else>无相关推荐</h2>
        </div>
        <div class="options">
          <van-button round size="small" color="black" plain @click="like">
            <template #default>
              <i class="iconfont" :class="{'active':articleContent.attitude===1}">&#xe721;</i>
              <span :class="{'active':articleContent.attitude===1}">喜欢</span>
            </template>
          </van-button>
          <van-button round size="small" color="black" plain @click="unlike">
            <template #default>
              <i class="iconfont" :class="{'active':articleContent.attitude===0}">&#xe746;</i>
              <span :class="{'active':articleContent.attitude===0}">不喜欢</span>
            </template>
          </van-button>
        </div>
        <div class="comment-list" ref="commentList" v-if="commentsAllList">
          <van-list
            finished-text="没有更多了"
            v-model="loading" :finished="finished" @load="loadingEvent">
            <div class="comment-item" v-for="(item,index) in commentsAllList" :key="index">
              <div class="col col-1">
                <img
                  v-if="item.aut_photo" class="avatar" v-lazy="item.aut_photo" alt="">
                <img
                  v-else class="avatar" src="@/assets/avatar.jpg" alt="头像">
                <span class="username">{{ item.aut_name }}</span>
                <div class="group">
                  <van-icon
                    @click="thumbUp(item)"
                    class="icon" name="good-job-o" size="18px" :class="{'active':item.is_liking}"/>
                  <span class="num" :class="{'active':item.is_liking}">{{ item.like_count }}</span>
                </div>
              </div>
              <div class="col col-2">
                <p>{{ item.content }}</p>
              </div>
              <div class="col col-3">
                <van-button color="#f5f5f6" round size="mini" class="reply-btn" @click="reComment(item)">
                  <template #default>
                    <span>{{ item.reply_count }}回复</span>
                    <i class="iconfont">&#xe743;</i>
                  </template>
                </van-button>
                <span class="date-time">{{ item.pubdate |  dateFormat }}</span>
              </div>
            </div>
          </van-list>
        </div>
      </div>
    </van-skeleton>
    <!--    <van-skeleton title avatar :row="3" :loading="loading2">-->
    <div class="footer" v-if="articleContent&&userProfile">
      <div class="send-comment">
        <div class="f1" @click="showComment()">
          写评论
        </div>
        <div class="f2">
          <van-icon
            @click="commentClick"
            name="chat-o" :badge="comments_total_count" size="24px" color="#848484"/>
        </div>
        <div class="f2">
          <van-icon
            @click="collect"
            name="diamond-o" size="24px" :color="articleContent.is_collected?'#f00':'#848484'"

          />
        </div>
        <div class="f2">
          <van-icon name="share-o" size="24px" color="#848484"/>
        </div>
      </div>
    </div>
    <!--    footer 占位-->
    <div class="footer1">

    </div>
    <!--    </van-skeleton>-->
    <!--    分享面板-->
    <van-share-sheet
      v-model="showShare"
      title="立即分享给好友"
      :options="options"
    />
    <!--  评论框   -->
    <CommentBox
      :isReply="isReply"
      @refreshEvent="refreshEvent"
      :target="target"
      :showStatus="showStatus"
      :art_id="art_id"
      :placeholder="placeholder"
      @close="close"
      :commentsAllResults="commentsAllList"
      :replyCommentsAllResults="replyCommentsAllList"
    ></CommentBox>
    <!--  回复框  -->
    <van-popup
      v-model="showReplyStatus" position="bottom"
      closeable
      round
      close-icon-position="top-left"
      :style="{ height: '100%' }"
      @closed="closePopup"
    >
      <h2 class="reply-title">{{ reply_total_count }}回复</h2>
      <hr class="line">
      <div class="reply-box">
        <div class="current-comment comment-item">
          <div class="col col-1">
            <img
              v-if="commentUserInfo.aut_photo" class="avatar" v-lazy="commentUserInfo.aut_photo" alt="">
            <img
              v-else class="avatar" src="@/assets/avatar.jpg" alt="头像">
            <span class="username">{{ commentUserInfo.aut_name }}</span>
            <van-tag type="primary" class="tag">楼主</van-tag>
            <van-button

              v-if="replyUserInfo.is_following"
              type="primary" class="follow" size="mini" @click="unfollow(commentUserInfo,replyUserInfo)">
              <template #default>
                <span>已关注</span>
              </template>
            </van-button>
            <van-button
              icon="plus"
              v-else
              type="info" class="follow" size="mini" @click="follow(commentUserInfo,replyUserInfo)">
              <template #default>
                <span>关注</span>
              </template>
            </van-button>
          </div>
          <div class="col col-2">
            <p>{{ commentUserInfo.content }}</p>
          </div>
          <div class="col col-3">
            <span class="date-time">{{ commentUserInfo.pubdate | dateFormat }}</span>
            <span class="tip-off" @click="tipOff">举报</span>
          </div>
          <div class="col col-4">
            <div class="thumb-up-list">
              <span>{{ commentUserInfo.like_count }}人赞过</span>
              <i class="iconfont"></i>
            </div>
            <div class="group">
              <van-icon
                @click="thumbUp(commentUserInfo)"
                class="icon" name="good-job-o" size="18px" :class="{'active':commentUserInfo.is_liking}"/>
              <span class="num" :class="{'active':commentUserInfo.is_liking    }">{{
                  commentUserInfo.like_count
                }}</span>
            </div>
          </div>
        </div>
        <hr class="line"/>
        <!--        <p>抢先评论</p>-->
        <h3>全部评论</h3>
        <div class="reply-lists comment-list" v-if="bol">
          <van-list v-model="loadingX" :finished="finishedX" @load="loadingEventX">
            <div class="reply-item comment-item" v-for="(item,index) in replyCommentsAllList" :key="index">
              <div class="col col-1">
                <img
                  v-if="item.aut_photo" class="avatar" v-lazy="item.aut_photo" alt="">
                <img
                  v-else class="avatar" src="@/assets/avatar.jpg" alt="头像">
                <span class="username">{{ item.aut_name }}</span>
                <div class="group">
                  <van-icon
                    @click="thumbUp(item)"
                    name="good-job-o" class="icon" size="18px" :class="{'active':item.is_liking}"/>
                  <span class="num" :class="{'active':item.is_liking}">{{ item.like_count }}</span>
                </div>
              </div>
              <div class="col col-2">
                <p>{{ item.content }}</p>
              </div>
              <div class="col col-3">
                <van-button color="#f5f5f6" round size="mini" class="reply-btn" @click="showComment(item)">
                  <template #default>
                    <span>{{ item.reply_count }}回复</span>
                    <i class="iconfont">&#xe743;</i>
                  </template>
                </van-button>
                <span class="date-time">{{ item.pubdate | dateFormat }}</span>
              </div>
            </div>
          </van-list>
        </div>
        <div id="space"></div>
      </div>
      <!--    footer 占位-->
      <!--      底部评论框 -->
      <div class="footer" v-if="articleContent&&userProfile">
        <div class="send-comment">
          <div class="f1" @click="showComment(commentUserInfo)">
            写评论
          </div>
          <div class="f2">
            <van-icon
              @click="commentClick"
              name="chat-o" :badge="comments_total_count" size="24px" color="#848484"/>
          </div>
          <div class="f2">
            <van-icon
              @click="collect"
              name="diamond-o" size="24px" :color="articleContent.is_collected?'#f00':'#848484'"

            />
          </div>
          <div class="f2">
            <van-icon name="share-o" size="24px" color="#848484"/>
          </div>
        </div>
      </div>
    </van-popup>

  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant'
import CommentBox from '@/components/CommentBox'
import {
// addComments,
// reportArticle,
  cancelArticleDislike,
  cancelArticleLike,
  cancelCommentLike,
  cancelArticleCollections,
  articleDislike,
  articleLike,
  commentLike,
  articleCollection,
  getArticleDetail,
  // getUserHistory,
  getComments
// readingDurations
} from '@/api/articles'
import {
  unfollow,
  follow,
  // cancelBlackLists,
  // goBlackLists,
  getUserProfile
// getUserFollowings,
// getUserFollowers,
// getUserFigure,
// getUserInfo
} from '@/api/user'

Vue.use(Lazyload)
Vue.use(Lazyload)

export default {
  name: 'Detail',
  components: {
    CommentBox
  },
  data () {
    return {
      isReply: false, // 是否为回复评论
      art_id: this.$route.query.id,
      target: this.$route.query.id,
      article_id: this.$route.query.id,
      profile: false,
      scroll: '',
      showShare: false,
      options: [
        [
          {
            name: '微信',
            icon: 'wechat'
          },
          {
            name: '微博',
            icon: 'weibo'
          },
          {
            name: 'QQ',
            icon: 'qq'
          }
        ],
        [
          {
            name: '复制链接',
            icon: 'link'
          },
          {
            name: '分享海报',
            icon: 'poster'
          },
          {
            name: '二维码',
            icon: 'qrcode'
          },
          {
            name: '小程序码',
            icon: 'weapp-qrcode'
          }
        ]
      ],
      showStatus: false, // 显示评论框
      // message: '', // 评论的内容
      // rowNumber: 2, // 评论行数
      // commentStatusUnfold: false, // 评论展开的状态
      // height: '20%'
      showReplyStatus: false, // 显示回复评论框
      scrollPosition: 0, // 滚动位置
      // topPosition: 0, // top头像位置
      loading1: true, // 骨架屏
      loading2: true,
      articleContent: '', // 文章详情 内容
      userProfile: '', // 指定用户信息 内容
      commentsAll: '', // 获取所有评论 信息
      commentsAllList: [], // 所有评论数组
      replyCommentsAll: '', // 获取回复评论
      replyCommentsAllList: [], // 所有回复评论数组
      commentUserInfo: '', // 回复评论的个人信息
      replyUserInfo: '', // 回复指定用户信息
      placeholder: '友善是交流的起点', // 评论回复placeholder
      loading: false, // 上拉加载
      loadingX: false, // 上拉加载
      finished: false, // 加载完成
      finishedX: false,
      currentPage: null,
      pageSize: 10,
      currentPage1: null, // 回复评论的当前页
      pageSize1: 10, // 回复评论的当前个数
      endId: 0, // 结束的标识
      endId1: 0, // 结束的标识
      comments_total_count: 0, //  评论总数
      reply_total_count: 0,
      bol: true // 静默刷新

    }
  },
  created () {
    // todo 3-1 渲染数据
    this.getUserAndArticleData()
    // todo 3-3-1 获取所有评论
    this.getAllComments()
  },
  mounted () {
    // 监听滚动事件
    window.addEventListener('scroll', this.scrollEvent)
  },
  // 取消监听 滚动
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollEvent)
  },
  activated () {
    window.scrollTo(0, this.$route.meta.scrollTop)
  },
  watch: {
    commentStatusUnfold: {
      deep: false,
      handler (value, oldValue) {
        if (value) {
          this.height = '100%'
          this.rowNumber = 25
        } else {
          this.height = '20%'
          this.rowNumber = 2
        }
      },
      immediate: true
    }
  },
  methods: {
    // todo 2-1 搜索跳转
    onClickRight1 () {
      this.$router.push({ name: 'Search' })
    },
    // todo 2-2 显示分享框
    onClickRight2 () {
      this.showShare = true
    },
    // todo 2-3  点击评论按钮到评论区域
    commentClick () {
      this.$nextTick(() => {
        window.scrollTo(0, this.$refs.commentList.offsetTop - 60)
      })
    },
    // todo 2-4 显示回复评论框
    showComment (item) {
      console.log('......item......')
      console.log(item)
      console.log(item instanceof MouseEvent)
      this.showStatus = true
      if (item) {
        this.isReply = true
        this.placeholder = `回复：${item.aut_name}`
      }
    },
    // todo 2-8 关闭弹窗
    close () {
      this.placeholder = '友善是交流的起点'
      this.showStatus = false
    },
    // todo 2-9 显示评论回复框
    reComment (item) {
      // 将数据传给回复评论框
      this.commentUserInfo = item
      console.log('cccccc..............')
      console.log(item.aut_name)
      this.isReply = true
      this.placeholder = `回复：${item.aut_name}`

      // 获取指定用户信息
      getUserProfile(this.commentUserInfo.aut_id.toString()).then(res => {
        this.replyUserInfo = res.data
      })
      this.showReplyStatus = true
      // todo 3-3-1 获取回复评论的数据
      this.loadingEventX()
    },
    // todo 2-10 监听滚动
    scrollEvent () {
      const scroll = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      this.scrollPostion = scroll
      if (scroll > this.topPosition) {
        this.profile = true
        this.$refs.navbar.showTitle = false
      } else {
        this.profile = false
        this.$refs.navbar.showTitle = true
      }
    },
    //  todo 3-1 渲染数据  文章数据getArticleDetail 指定用户信息 getUserProfile
    // 获取文章数据和用户数据
    getUserAndArticleData () {
      // 105480
      getArticleDetail(this.article_id).then(res => {
        console.log('文章数据')
        console.log(res)
        this.articleContent = res.data
        getUserProfile(this.articleContent.aut_id).then(res => {
          console.log('指定用户信息')
          console.log(res)
          this.userProfile = res.data
          this.loading1 = false
        })
      })
    },
    // todo 3-2 关注/不关注
    follow (item, userInfo) {
      follow({ target: item.aut_id }).then(res => {
        userInfo.is_following = !userInfo.is_following
      })
    },
    unfollow (item, userInfo) {
      unfollow(item.aut_id).then(res => {
        userInfo.is_following = !userInfo.is_following
      })
    },
    // todo 3-3 获取评论或评论回复
    // todo 3-3-1 获取评论
    async getAllComments () {
      getComments({
        type: 'a',
        // source: 105480
        source: this.article_id
      }).then(res => {
        console.log('获取所有评论')
        console.log(res)
        this.comments_total_count = res.data.total_count
        this.commentsAllList = [...this.commentsAllList, ...res.data.results]
        console.log('获取评论列表')
        console.log(this.commentsAllList)
        // 保存下一页标识
        this.currentPage = res.data.last_id
        // 保存结束的标识
        this.endId = res.data.end_id
        console.log('保存下一页标识')
        console.log(this.currentPage)
        console.log('保存结束的标识')
        console.log(this.endId)
      })
    },
    // todo 上拉加载
    loadingEvent () {
      getComments({
        type: 'a',
        // source: 105480
        source: this.article_id,
        offset: this.currentPage,
        limit: this.pageSize
      }).then(res => {
        console.log('获取其他评论')
        console.log(res)
        this.comments_total_count = res.data.total_count

        this.commentsAllList = [...this.commentsAllList, ...res.data.results]
        console.log('获取评论列表。。。。')
        console.log(this.commentsAllList)
        // 保存下一页标识
        this.currentPage = res.data.last_id
        // 保存结束的标识
        this.endId = res.data.end_id
        // 将状态设置为false
        this.loading = false
        if (this.currentPage === this.endId) {
          this.finished = true
        }
      })
    },
    // todo 3-3-2 获取回复
    // async getReplyComments (item) {
    //   console.log('获取的回复')
    //   console.log(item)
    //   getComments({
    //     type: 'c',
    //     source: item.com_id.toString()
    //   }).then(res => {
    //     console.log('获取回复')
    //     console.log(res)
    //     this.replyCommentsAll = res.data
    //   })
    // },
    loadingEventX () {
      console.log('...................loading..................')
      this.bol = false
      getComments({
        type: 'c',
        source: this.commentUserInfo.com_id.toString(),
        offset: this.currentPage1,
        limit: this.pageSize1
      }).then(res => {
        console.log('获取回复....')
        console.log(res)
        this.reply_total_count = res.data.total_count
        this.$nextTick(() => {
          this.bol = true
          this.replyCommentsAllList = [...this.replyCommentsAllList, ...res.data.results]
          console.log('获取回复评论列表')
          console.log(this.replyCommentsAllList)
        })

        // 保存下一页标识
        console.log('保存下一页的标识1111111')
        this.currentPage1 = res.data.last_id
        console.log(this.currentPage1)
        // 保存结束的标识
        this.endId1 = res.data.end_id
        console.log('保存结束的标识1111111')
        console.log(this.endId1)
        // 将状态设置为false
        this.loadingX = false
        if (this.currentPage1 === this.endId1) {
          this.finishedX = true
        }
      })
    },
    // 关闭回复框
    closePopup () {
      this.finishedX = false
      this.currenPage1 = null
      this.endId1 = 0
      this.replyCommentsAllList = []
    },
    // todo 3-4 文章喜欢
    like () {
      if (this.articleContent.attitude === 1) {
        this.cancelArticleLike()
      } else {
        this.articleLike()
      }
    },
    async articleLike () {
      console.log('喜欢')
      const res = await articleLike({
        target: this.articleContent.art_id
      })
      console.log(res)
      this.articleContent.attitude = 1
    },
    //  取消文章喜欢
    async cancelArticleLike () {
      console.log('取消喜欢')
      const res = await cancelArticleLike(this.articleContent.art_id)
      console.log(res)
      this.articleContent.attitude = -1
    },
    // todo 3-5 不喜欢
    unlike () {
      if (this.articleContent.attitude === 0) {
        this.cancelArticleDislike()
      } else {
        this.articleDislike()
      }
    },
    async articleDislike () {
      console.log('不喜欢')
      const res = await articleDislike({
        target: this.articleContent.art_id
      })
      console.log(res)
      this.articleContent.attitude = 0
    },
    // 取消文章不喜欢
    async cancelArticleDislike () {
      console.log('取消喜欢')
      const res = await cancelArticleDislike(this.articleContent.art_id)
      console.log(res)
      this.articleContent.attitude = -1
    },
    // todo 3-6 收藏
    collect () {
      if (this.articleContent.is_collected) {
        this.cancelArticleCollections()
      } else {
        this.articleCollection()
      }
    },
    async articleCollection () {
      console.log('收藏文章')
      const res = await articleCollection({
        target: this.articleContent.art_id
      })
      console.log(res)
      this.articleContent.is_collected = true
    },
    async cancelArticleCollections () {
      console.log('取消收藏')
      const res = await cancelArticleCollections(this.articleContent.art_id)
      console.log(res)
      this.articleContent.is_collected = false
    },
    // todo 3-7 评论点赞
    thumbUp (item) {
      console.log('点赞')
      if (item.is_liking) {
        this.cancelCommentLike(item)
      } else {
        this.commentLike(item)
      }
    },
    async commentLike (item) {
      console.log('点赞评论')
      console.log(item)
      const res = await commentLike({
        target: item.com_id.toString()
      })
      console.log(res)
      item.is_liking = !item.is_liking
      item.like_count += 1
      console.log('点赞。。。。。。')
      console.log(item.is_liking)
    },
    async cancelCommentLike (item) {
      console.log('取消评论')
      console.log(item)
      const res = await cancelCommentLike(item.com_id.toString())
      console.log(res)

      item.is_liking = !item.is_liking
      item.like_count -= 1
      console.log('取消评论。。。。。')
      console.log(item.is_liking)
    },
    // todo 3-8 举报
    tipOff () {
      console.log('举报用户')
    },
    // todo 4-3 刷新
    refreshEvent () {
      this.getAllComments()
    }
  },
  computed: {
    // scrollPosition () {
    //   return (value) => {
    //     return 0 || value
    //   }
    // },
    scrollChange () {
      return this.scrollPosition// 依赖于data中的scroll，scroll变化了，scrollChange才会变化
    },
    topPosition () {
      return 0 || this.$refs.top.offsetTop + 2
    }

  }
}
</script>

<style lang="less" scoped>
.detail {

  .profile-group {
    display: flex;
    align-items: center;

    .col-1 {
      .avatar {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        object-fit: cover;
      }
    }

    .col-2 {
      margin-left: 6px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: space-between;
      color: #fff;
      font-size: 10px;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      font-weight: 500;
      line-height: 20px;
      letter-spacing: 1px;

      .username-top {
        font-size: 14px;
      }
    }
  }

  .content {
    padding: 0 @padding-15;

    h1.title {
      margin-top: 30px;
      font-size: 24px;
      font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
      font-weight: 700;
      color: #3a3a3a;
      line-height: 33px;
      letter-spacing: 1px;
    }

    .top {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 14px;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      font-weight: 400;
      line-height: 28px;
      letter-spacing: 1px;

      .avatar {
        height: 40px;
        width: 40px;
        border-radius: 50%;
        object-fit: cover;
      }

      .col {
        display: flex;
      }

      .col-2 {
        margin-left: 8px;
        flex-direction: column;
        justify-content: center;

        .username {
          color: #000;
        }

        .time {
          color: #c0c0c0;
        }
      }

      .col-3 {
        margin-left: auto;
      }
    }

    ::v-deep .article {
      margin-top: 24px;
      // 文章内容
      color: #1d1d1d;
      font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
      font-weight: 400;
      line-height: 28px;
      letter-spacing: 1px;

      h1, h2, h3, h4, h5, h6, p, code, li {
        font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
        color: #3a3a3a;
        word-wrap: break-word;
        overflow-wrap: break-word;
      }

      h1 {
        font-size: 30px;
        line-height: 30px;
      }

      h2 {
        font-size: 24px;
        line-height: 24px;
      }

      h3 {
        font-size: 20px
      }

      h4 {
        font-size: 16px;
      }

      ul, li, p, pre {
        font-size: 14px;
      }

      pre {
        overflow: auto;
      }

      img {
        object-fit: contain;
        width: 100%;
        height: 100%;
      }

      p {
        color: #1d1d1d;
        font-size: 14px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-weight: 400;
        line-height: 28px;
        letter-spacing: 1px;
      }

      a {
        text-decoration: none;
        color: red;
        background-color: rgba(255, 0, 0, .1);
      }

      a:hover {
        background-color: rgba(255, 0, 0, .4);
      }

      ul#list-paddingleft-2 {
        display: flex;
        flex-direction: column;
      }

    }

    .you-like {
      h2 {
        font-size: 15px;
        font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
        font-weight: 700;
        text-align: left;
        color: #333333;
        line-height: 33px;
        letter-spacing: 1px;
      }

      ul.like-lists {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }

      li.like-item {
        display: flex;
        align-items: center;
        flex: 0 0 45%;
        font-size: 15px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-weight: 400;
        text-align: left;
        color: #666666;
        line-height: 33px;
        letter-spacing: 1px;
      }
    }

    .options {
      margin-top: 22px;
      display: flex;
      justify-content: space-evenly;
      margin-bottom: 30px;

      i.active {
        color: red
      }

      span.active {
        color: red
      }
    }

    .comment-list {
      margin-top: 22px;

      .comment-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 22px;

        .col-1 {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .avatar {
            height: 40px;
            width: 40px;
            border-radius: 50%;
            object-fit: cover;
          }

          .username {
            margin-left: 8px;
            margin-right: auto;
            color: #486898;
            font-size: 14px;
            font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
            font-weight: 500;
            line-height: 28px;
            letter-spacing: 1px;
          }

          .group {
            color: #3f3f3f;
            display: flex;
            align-items: center;

            .num {
              margin-left: 8px;
              font-size: 14px;
              font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
              font-weight: 400;
              line-height: 28px;
              letter-spacing: 1px;
            }

            .icon.active {
              color: red;
            }

            .num.active {
              color: red
            }
          }
        }

        .col-2 {
          margin-left: 45px;

          p {
            color: black;
            font-size: 16px;
            font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
            font-weight: 400;
            letter-spacing: 1px;
          }
        }

        .col-3 {
          display: flex;
          margin-left: 45px;
          margin-top: 22px;

          .reply-btn {
            margin-right: 10px;
            display: flex;
            align-items: center;

            span {
              color: #1d1d1d;
            }

            .iconfont {
              color: #1d1d1d;
            }
          }

          .date-time {
            olor: #1d1d1d;
            font-size: 12px;
            font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
            font-weight: 500;
            line-height: 28px;
            letter-spacing: 1px;
          }
        }
      }
    }
  }

  .footer {
    border-top: 1px solid #ddd;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 0 @padding-15;
    background-color: #fff;

    .send-comment {
      height: 60px;
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #ccc;

      .f1 {
        flex: 1;
        height: 32px;
        display: flex;
        align-items: center;
        border: 1px solid #eeeeee;
        border-radius: 16px;
        padding-left: 10px;
      }

      .f2 {
        text-align: center;
        margin-left: 23px;

        .iconfont {
          font-size: 28px;
        }
      }

      .f2.active {
        color: red;
      }
    }
  }

  .footer1 {
    height: 60px;
    //background-color: #f00;
  }

  .comment-popup {
    transition: all .4s;
  }

  .comment-wrapper {
    display: flex;

    .comment-box {
      width: 70%;
      border: 1px solid #ddd;
      margin: 20px;
    }

    .comment-group {
      display: flex;
      align-items: center;
      flex-direction: column;
      justify-content: space-between;

      .iconfont {
        margin-top: 20px;
        font-size: 20px;
        font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
        font-weight: 700;
        color: #b8b8b8;
        line-height: 33px;
        letter-spacing: 1px;
      }

      span {
        font-size: 20px;
        font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
        font-weight: 700;
        color: #b8b8b8;
        line-height: 33px;
        letter-spacing: 1px;
        margin-bottom: 20px;
      }

    }
  }

  .reply-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
    font-weight: 500;
    text-align: left;
    color: #333333;
    line-height: 50px;
    letter-spacing: 1px;
  }

  hr.line {
    height: 1px;
    background-color: #eeebeb;
    transform: scaleY(0.2);
    transform-origin: 20% 100%;
  }

  .reply-box {
    .comment-item {
      padding: 0 @padding-15;
      margin-top: 22px;
      display: flex;
      flex-direction: column;
      margin-bottom: 22px;

      .col-1 {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .avatar {
          height: 40px;
          width: 40px;
          border-radius: 50%;
          object-fit: cover;
        }

        .username {
          margin-left: 8px;
          color: #486898;
          font-size: 14px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: 500;
          line-height: 28px;
          letter-spacing: 1px;
        }

        .tag {
          margin-left: 6px;
          margin-right: auto;
        }

        .group {
          color: #3f3f3f;
          display: flex;
          align-items: center;

          .num {
            margin-left: 8px;
            font-size: 14px;
            font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
            font-weight: 400;
            line-height: 28px;
            letter-spacing: 1px;
          }

          .icon.active {
            color: red;
          }

          .num.active {
            color: red
          }

        }

      }

      .col-2 {
        margin-left: 45px;

        p {
          color: black;
          font-size: 16px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: 400;
          letter-spacing: 1px;
        }
      }

      .col-3 {
        display: flex;
        align-items: center;
        justify-content: space-between;
        align-items: center;
        margin-left: 45px;
        margin-top: 22px;

        .date-time {
          color: #1d1d1d;
          font-size: 12px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: 500;
          line-height: 28px;
          letter-spacing: 1px;
        }

        .tip-off {
          color: #1d1d1d;
          font-size: 12px;
          font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
          font-weight: 500;
          line-height: 28px;
          letter-spacing: 1px;
        }
      }

      .col-4 {
        margin-left: 45px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #1d1d1d;
        font-size: 12px;
        font-family: Microsoft YaHei Regular, Microsoft YaHei Regular-Regular;
        font-weight: 500;
        line-height: 28px;
        letter-spacing: 1px;

        .group {
          display: flex;
          align-items: center;
          justify-content: center;
        }

      }
    }

    h3 {
      padding: 0 @padding-15;
      font-size: 16px;
      font-family: Microsoft YaHei Bold, Microsoft YaHei Bold-Bold;
      font-weight: 700;
      text-align: left;
      color: #333333;
      line-height: 50px;
      letter-spacing: 1px;
    }

    .reply-lists {
      .comment-item {
        .col-1 {
          .username {
            margin-right: auto;
          }

          .icon.active {
            color: red;
          }

          .num.active {
            color: red
          }
        }

        .col-3 {
          .reply-btn {
            margin-right: 10px;
            display: flex;
            align-items: center;

            span {
              color: #1d1d1d;
            }

            .iconfont {
              color: #1d1d1d;
            }
          }
        }
      }
    }

  }

  #space {
    height: 60px;
    width: 100%;
    background-color: #fff;
  }

}

</style>
